import React, { useState, useEffect, useCallback } from 'react'
import { Modal, Form, Input, DatePicker, TreeSelect, Select, Row, Col, Button, Icon, Radio } from 'antd';
import styles from './index.less'

function EditModal({ form, editModalMsg, onCancel, editSava }) {
  const { getFieldDecorator, validateFields, resetFields, getFieldValue, setFieldsValue } = form;

  let { title, type, show, formItems, params } = editModalMsg;
  const renderFormItems = () => {
    let formItemsReactDoms = [], dom = [];
    formItems.forEach((item, index) => {
      formItemsReactDoms.push(
        <li key={item.dataIndex}>
          <Form.Item label={item.label}>
            {item.type === 'input' && getFieldDecorator(item.dataIndex, {
              initialValue: params[item.dataIndex] || item.value,
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: item.placeholder,
                },
                {
                  max: item.max,
                  message: `最多输入${item.max}位`,
                },
              ],
            })(<Input type={item.inputType || 'text'} placeholder={item.placeholder} addonAfter={item.suffix} />)}
            {item.type === 'select' && getFieldDecorator(item.dataIndex, {
              initialValue: params[item.dataIndex] || item.value,
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: item.placeholder,
                },
              ],
            })(
              <Select showSearch style={{ width: '130px' }} placeholder={item.placeholder}>
                {
                  item.selectArr.map((selecItem, selecIndex) =>
                    <Select.Option key={selecIndex} value={selecItem.value}>{selecItem.label}</Select.Option>
                  )
                }
              </Select>
            )}
          </Form.Item>
        </li>
      )
    })
    return <ul>{formItemsReactDoms}</ul>
  }
  const onCancelHandle = () => {
    onCancel();
  }

  const saveHandle = () => {
    validateFields((err, values) => {
      if (!err) {
        editSava(type, { ...values, id: params.id });
      }
    });
  }
  return (
    <Modal
      title={title}
      visible={show}
      destroyOnClose="true"
      maskClosable="false"
      onCancel={onCancel}
      footer={null}
    >
      <div className={styles.container}>
        <div className={styles.formBody}>
          {renderFormItems()}
        </div>
        <div className={styles.modalFooter}>
          <Button type="primary" onClick={saveHandle}>
            确定
          </Button>
          <Button type="primary" onClick={onCancel}>
            取消
          </Button>
        </div>
      </div>
    </Modal>

  )
}

export default Form.create()(EditModal);